<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学员信息管理</title>
    <script>
        //1.目标：对 学员信息对象 数组 做 增删查 操作
        //2.思路：
        //      a.创建 学员对象 数组 [ {name:'万万'..},{name:'鹏鹏'},{name:'娟娟'} ]
        //      b.接收用户的 操作选项（新增，删除，显示，退出）
        //      c.根据不同的 选项 调用不同的函数
        //        c1.新增函数：接收用户的 名字、年龄、性别，并添加到 数组中
        //        c2.删除函数：接收要删除用户的名字，并 遍历学员数组，从中 删除对应的 学员对象
        //        c3.显示函数：遍历数组，调用 学员对象的 sayHi方法 来完成 打招呼

        //0.学员对象数组,包含 一位初始 学员对象
        let stuList = [];

        // 为数组 动态添加一个 属性，用来保存 下一个对象的 id
        // 用法：每当 构造函数 中 要为 新对象 设置 id时，就从 此属性中获取
        //      每次 用完后，都要 +1
        stuList.autoId = 1;

        //0.1 创建 学员信息 构造函数
        function StuInfo(name, age, gender) {
            // 自动为 学员对象 添加一个 id ，并设置 id值
            this.id = stuList.autoId;
            stuList.autoId++;
            // 
            this.name = name;
            this.age = age;
            this.gender = gender;
        }

        //0.2 创建 4个学员对象，并添加到 数组中
        stuList.push(new StuInfo('小白', 18, false));
        stuList.push(new StuInfo('小黑', 19, true));
        stuList.push(new StuInfo('小红', 29, true));
        stuList.push(new StuInfo('小绿', 31, true));

        //1.主函数：负责 整体业务循环和操作
        function main() {
            //提问：全局函数 中的 this 是谁呢？
            while (true) {
                //a.接收 用户的 操作选项
                let usrOpt = +prompt('请输入您要进行的操作：\n1.添加学员 \n2.删除学员 \n3.显示学员列表 \n4.退出');
                //b.根据选项 调用不同的函数
                if (usrOpt == 1) {
                    addStu();
                } else if (usrOpt == 2) {
                    deleteStu();
                } else if (usrOpt == 3) {
                    showList();
                } else if (usrOpt == 4) {
                    alert('谢谢使用，再见`~~byebye~~~');
                    break; // 因为 没有使用 switch 结构，所以 直接 退出的 循环结构
                } else {
                    alert('您的选项好像写错了哦~~~ : ）');
                }
            }
        }

        // 调用主函数（入口函数）
        main();

        // 0.3 获取 用户输入的 数字！！
        function getUsrNum(msg) {
            let usrNum = +prompt(msg);

            while (isNaN(usrNum)) {
                usrNum = +prompt('刚才输入的不是数字，' + msg);
            }

            return usrNum;
        }

        //2.新增学员信息
        function addStu() {
            //a.分别接受 学员3个信息
            let uName = prompt('请输入姓名：');
            let uAge = getUsrNum('请输入年龄：');
            let uGender = confirm('请选择性别： 确定-男，取消-女');
            //b. 创建学员对象
            let stuObj = new StuInfo(uName, uAge, uGender);
            //c. 将学员对象 添加到数组，并重新 展示 学员列表
            stuList.push(stuObj);

            showList();
        }

        //3.删除学员 - 根据学员名字删除
        function deleteStu() {
            //a.获取要删除学员的id
            let stuId = getUsrNum('请输入要删除学员的id：'); // prompt('请输入要删除学员的id：');
            //b.遍历学员对象数组，找出 相同id的 对象，删除之
            for (let i = 0; i < stuList.length; i++) {
                // 找到 名字相等的 学员对象
                if (stuList[i].id == stuId) {
                    // 根据 下标 删除学员对象
                    stuList.splice(i, 1);
                    // 退出循环
                    break;
                }
            }
            //c.显示学员列表
            showList();
        }

        //4.显示学员列表
        function showList() {
            //a.准备 变量保存 列表字符串
            let strList = '';

            //b.遍历 学员对象数组
            for (let i = 0; i < stuList.length; i++) {
                //取出学员对象
                let stuObj = stuList[i];
                // 拼接 学员信息字符串 '1-james-18-男'
                let strInfo = stuObj.id + ' : ' + stuObj.name + ' : ' + stuObj.age + ' : ' + (stuObj.gender ? '男' :
                    '女');
                // 将 每个学员信息字符串 拼接到 列表字符串中
                strList += strInfo + '\n';
            }

            //c.打印列表字符串
            alert(strList);
        }
    </script>
</head>

<body>

</body>
<!-- author:成都前端_JamesZou 
     from: https://www.jianshu.com/u/00a012fcb7e9
-->

</html>